<script setup lang="ts">

import {Delete,Bottom,EditPen,ElementPlus} from "@element-plus/icons-vue";
import {ref,defineEmits} from "vue";
import {digElMessage} from '../../../common/Message.ts'
import {deleteRecyclebinFileApi,recoverRecyclebinFileApi} from "../../operation/FileApi";


const props=defineProps<{
  fileInfo:{
    fileId:"",
    fileName:"",
    filePath:"",
    fileUploadTime:"",
    folderId:"",
    userId:"",
    fileType?:""

  }
}>();



let showProper=ref()

let imgUrl=ref("/logo/other.png")
let suffix=props.fileInfo.fileName.substring(props.fileInfo.fileName.lastIndexOf(".")+1);


if(suffix=="jpg"||suffix=="png"||suffix=="svg"){
  imgUrl.value=props.fileInfo.filePath
}

if(suffix=="pdf"){
  imgUrl.value="logo/pdf.png"
}
if(suffix==="exe"){
  imgUrl.value="logo/exe.png"
}
if(suffix=="zip"){
  imgUrl.value="logo/zip.png"
}
if(suffix=="doc"){
  imgUrl.value="logo/doc.png"
}
if(suffix=="docx"){
  imgUrl.value="logo/docx.png"
}
if(suffix=="jar"){
  imgUrl.value="logo/jar.png"
}
if(suffix=="rar"){
  imgUrl.value="logo/rar.png"
}

const emit=defineEmits<{
  (e:"updateData"):void
}>()
const deleteRecycleFile=async ()=>{


  let formData = new FormData();
  formData.append("fileMd5",props.fileInfo.fileId)
  await deleteRecyclebinFileApi(formData).then(res=>{

    if(res.code=='00000'){
      setTimeout(()=>{
        emit("updateData")
      },0)
      digElMessage('删除文件成功','success',800);

    }})
}

const recoverRecycleFile=async ()=>{
  let formData = new FormData();
  formData.append("fileMd5",props.fileInfo.fileId)
  await recoverRecyclebinFileApi(formData).then(res=>{

    console.log(res.code)
    if(res.code=='00000'){
      setTimeout(()=>{
        emit("updateData")
      },0)
      digElMessage('恢复文件成功','success',800);

    }})
}

</script>

<template>

  <el-popover placement="right-start" :width="10" trigger="click" hide-after="100" ref="showProper">
    <template #reference>
      <div class="fileContainer">
        <div class="folderWrapper">
          <div class="folder">
            <el-image :src="imgUrl" style="height: 50px;width: 50px"></el-image>
          </div>
          <div class="folderName" style="width: 90px" >
            <el-text :line-clamp="1" style="font-size: 14px;  font-family: 华文楷体;">
              {{props.fileInfo.fileName}}</el-text>
          </div>
          <!--      <div class="folderTime" style="width: 90px">-->
          <!--        <el-text :line-clamp="1"    style="font-size: 10px;  font-family: 华文楷体;">{{props.fileInfo.fileUploadTime}}</el-text>-->

          <!--      </div>-->
        </div>
      </div>

    </template>

    <div class="dig_select" >
      <div >
        <el-button style="font-size: 10px;width: 15px;height: 15px" type="primary" :icon="Bottom"   @click="recoverRecycleFile" />
        <el-text type="info" @click="recoverRecycleFile">恢复</el-text>
      </div>
      <div>
        <el-button style="font-size: 10px;width: 15px;height: 15px" type="danger" :icon="Delete" @click="deleteRecycleFile" />
        <el-text type="info" @click="deleteRecycleFile">删除</el-text>
      </div>



    </div>

    <!--    <el-button type="success" :icon="Check" circle />-->
    <!--    <el-button type="info" :icon="Message" circle />-->
  </el-popover>



</template>

<style scoped lang="less">
.folderContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  font-family: "Informal Roman";
  //font-family: 华文楷体;
}

.folder {
  width: 70px;
  height: 80px;
  perspective: 600px;
  transform-style: preserve-3d;
  cursor: pointer;
}
.folderWrapper{
  padding: 10px 20px 10px 10px;
  position: relative;
  transition: all .2s ease;
  border-radius: 6px;
  cursor: pointer;

}
.folderWrapper:hover{
  background-color: #ffffff;
}

.folder div.back, .folder div.front {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 60px;
  background-color: #c5b7f1;
}

.folder div.center {
  width: 90px;
  height: 60px;
  background-color: #ffffff;
  position: absolute;
  top: 5px;
  left: 10px;
  z-index: 2;
  border-radius: 6px;
}

.folder .front {
  background-image: linear-gradient(to left, #24d5ff 0%, #1eb2ff 45%, #1890ff 100%);
  border-radius: 6px;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(0,0,0,1);
  font-weight: 500;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 1px rgba(255, 255, 255, 0.25) inset, 0 -2px 2px rgba(0, 0, 0, 0.1);
  transform: rotateX(-30deg);
  transform-origin: bottom;
  transition: all .2s ease;

}

.folder:hover .front {
  transform: rotateX(-40deg);
}
.folderName {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(37, 48, 43);
}

.folderTime {

  font-size: 14px;
  font-weight: 500;
  color: rgb(37, 48, 43);


}


.dig_select{
  margin-left: 10px;
  div{
    margin-bottom: 10px;
    .el-button{
      margin-right: 10px;
    }
  }
}



</style>